<template>
    <div>
        <el-menu
        :default-active="path"
        style="background-color:rgba(208, 200, 227)"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        @select="handleSelect"
        >
            <el-submenu index="answer" style="background-color:rgb(167,149,206)">
                <template slot="title">
                    <i style="font-size:24px;margin-bottom:2px;color:rgb(222,217,235)" class="el-icon-message"></i>
                    <span style="font-size:20px;color:rgb(222,217,235)">我收到的</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item 
                    index="myReceived" style="background-color:rgb(238,238,243)">
                        <span style="font-size:18px">答卷列表</span>
                    </el-menu-item>
                    <el-menu-item 
                    index="statistics" style="background-color:rgb(238,238,243)">
                        <span style="font-size:18px">答卷统计</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <div style="background-color:rgb(183,170,211)">
                <el-menu-item index="myCreated"
                >
                    <i style="font-size:24px;margin-bottom:2px;color:rgb(122,97,174)" class="el-icon-tickets"></i>
                    <span slot="title" style="font-size:20px">我发布的</span>
                </el-menu-item>
            </div>
            <div style="font-size:20px;background-color:rgb(201,191,221)">
                <el-menu-item index="myModels"
                >
                    <i style="font-size:24px;margin-bottom:2px;color:rgb(122,97,174)" class="el-icon-edit-outline"></i>
                    <span slot="title" style="font-size:20px;">我的模板</span>
                </el-menu-item>
            </div>
        </el-menu>
    </div>
</template>

<script>
export default {
    data(){
        return{
            path:''
        }
    },
    props:{
    },
    methods:{
        handleOpen: function(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose: function(key, keyPath) {
            console.log(key, keyPath);
        },
        handleSelect: function(key, keyPath) {
            console.log(key, keyPath);
            this.$emit('choosePath',key)
        },
    }
}
</script>

<style>
.el-menu-item-group__title {
    padding: 0 0;
}
.el-icon-arrow-down:before {
    color: rgb(222,217,235);
}
</style>